<template>
  <div class="container" @click="goToPath">
    <div class="icon">
      <img :src="passData.iconSrc" alt="">
    </div>
    <div class="context">
      <p>{{ passData.applicationName }}</p>
    </div>
    <div class="arrow">
      <el-icon>
        <ArrowRight />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import router from '../router/index.js';

const props = defineProps({
  passData: {
    type: Object,
    required: true
  }
});

const goToPath = () => {
  const path = props.passData.applicationPath;
  console.log("Navigating to path:", path);
  if (!path) {
    console.warn("No valid path provided for navigation.");
    return;
  }

  const type = typeof path;
  if (type === 'string') {
    router.push(path).catch(err => {
      console.error("Navigation failed:", err);
    });
  } else if (type === 'object' && path.name) {
    console.log("Navigating to object path:", path.params.id);
    router.push({ name: path.name, params: {id: path.params.id,type:path.params.type} || {} }).catch(err => {
      console.error("Navigation failed:", err);
    });
  } else {
    console.warn("Invalid path format for navigation.");
  }
};

</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  background-color: #fff;
}

.icon {
  width: 10%;
  /* background-color: blue; */
}

.icon img {
  width: 30px;
  height: 30px;
}

.context {
  width: 80%;
  /* background-color: red; */
}

.context p {
  margin: 0;
  font-size: 16px;
}

.arrow {
  width: 10%;
  flex: 1;
  cursor: pointer;
  /* background-color: pink; */
}
</style>